<template>
  <div>
    <div>
      <div v-for="(item,index) in flowList" :key='index'>
        <div class="weui-cell vux-tap-active weui-cell_access" data-v-ecaca2b0="">
          <div class="weui-cell__hd"></div>
          <div class="vux-cell-bd vux-cell-primary">
            <a class="vux-label-desc" @click="openModal(item.id)">{{ item.subject }}</a>
          </div>
          <button  v-if="abPermission=='b'||abPermission=='w'" class="weui-btn weui-btn_mini weui-btn_warn fa-trash fa" v-on:click="removeflow(index)"></button>
        </div>
      </div>
    </div>
    <ab-cust-dialog v-if="abPermission=='b'||abPermission=='w'"
                    :dialogKey="currentSelect"
                    :dialogSetting="dialogSetting" @afok="pushflowList"
                    :queryParam="{def_key_:this.defkey,creator_:this.creator}"
                    :style="style">流程</ab-cust-dialog>
  </div>

</template>

<script>
export default {
  props:{
    value : {
      default : "[]"
    },
    abPermission:{
      type:String,
      default:"w"
    },
    defkey: {
      type:String,
      default:""
    },
    creator:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      data:{
      },
      isClosable:true,
      style :"",
      currentSelect:'quoteSelector',
      flowList:[],
      dialogSetting:{multiple : true}
    }
  },
  components:{

  },
  mounted : function(){
    // 移除掉外部css
    this.$el.className = "";
    if(this.value&&this.abPermission!='n'){//初始化数据
      this.flowList=JSON.parse(this.value);
    };
    this.handleStyle();
    this.aboutClosable();
  },
  methods: {
    openModal(id){
      this.$router.push({path:"/bpm/instanceDetailCopy?"+'instanceId='+id})
    },
    pushflowList(dataArr){
      if(!dataArr)return;
      if(!this.flowList){
        this.flowList = [];
      }
    //debugger
      dataArr.forEach((item)=>{
        //校验是否重复存在
        for(var i=0,oldflow;oldflow=this.flowList[i++];){
          if(oldflow.id===item.id){
            return;
          }
        }
        this.flowList.push(item);
      });
    },
    removeflow : function(index){
      //debugger
      this.flowList.splice(index,1)
    },
    selectflow(id){
      this.$router.push({path:"/bpm/instance/instanceDetail/"+id})
    },
    handleStyle : function(){
      if(!this.$vnode.context.$validity){
        this.$vnode.context.$validity = {};
      }
      if(this.abPermission == "b"){
        if(!this.value||this.value=="[]"){
          this.$vnode.context.$validity[this.$attrs.desc] = "必填";
          this.style = "border: 2px  solid #ed4014;";
        }else{
          delete this.$vnode.context.$validity[this.$attrs.desc];
          this.style = "";
        }
      }// 动态权限后切换权限
      else if(this.$vnode.context.$validity[this.$attrs.desc]){
        delete this.$vnode.context.$validity[this.$attrs.desc];
        this.style = "";
      }
    },
    aboutClosable:function(){
      if (this.abPermission=='b'||this.abPermission=='w'){
        this.isClosable=true;
      }else {
        this.isClosable=false;
      }
    }
  },


  created: function () {

  },
  watch: {
    flowList: function () {
      //debugger
      if(!this.flowList || this.flowList.length==0){
        this.$emit('input', '');
        return ;
      }
      let list = [];
      this.flowList.forEach(item =>{
        let json = {
          subject:item.subject,
          id:item.id
        };
        list.push(JSON.stringify(json));
      });
      this.$emit('input', "["+list.join(",")+"]");
    },
    value : function(oldValue,newValue){
      this.handleStyle();
    },
    abPermission: function(){
      this.handleStyle();
    },

  }
}
</script>
<style>
.removeButton{
  width: 15px;/*设置按钮宽度*/
  height: 20px;/*设置按钮高度*/
  color:white;/*字体颜色*/
  background-color:cornflowerblue;/*按钮背景颜色*/
  border-radius: 3px;/*让按钮变得圆滑一点*/
  border-width: 0;/*消去按钮丑的边框*/
  margin: 0;/*margin0*/
  outline: none;/*取消轮廓*/
  font-size: 15px;/*设置字体大小*/
  font-weight: lighter;/*设置字体粗细*/
  text-align: center;/*字体居中*/
}

</style>
